<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="layui/layui.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/goods.css"/>
</head>
<body>
    <div id="app">
        <!--顶部导航栏-->
        <div class="layui-container">
            <div class="layui-row head-nav">
                <div class="layui-col-md1">
                    <img src="images/wopinla-logo.jpg" height="80px">
                </div>
                <div class="layui-col-md1">
                    首页
                </div>
                <div class="layui-col-md1">
                     数码3C
                </div>
                <div class="layui-col-md1">
                    家用电器
                </div>
                <div class="layui-col-md1">
                    服饰鞋包
                </div>
                <div class="layui-col-md1">
                    食品饮料
                </div>
                <div class="layui-col-md1">
                    美妆个护
                </div>
                <div class="layui-col-md1">
                    家居生活
                </div>
                <div class="layui-col-md1">
                    服务
                </div>
                <div class="layui-col-md3">

                    <div class="layui-form-item" style="margin-bottom: 0px;margin-top: 21px; ">
                        <div class="layui-input-block" style="margin-left: 0;">
                            <input type="text"  placeholder="你在找什么" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 商品信息页面-->
        <div class="goods-info">
            <div class="goods-image">
                <img src="images/37.JPG" width="390" height="390"/>
            </div>
            <div class="detailedinfo">
                <div class="goods-name">PIVRING 皮夫凌</div>
                <div class="goods-description">可以容纳午餐盒、备用衣物和14英寸笔记本电脑或平板电脑。水瓶和棒球帽都可放入网眼隔层中。非常适合上学时携带或作为备用包袋。</div>

                <div class="red-price">
                    <div class="yellow-price">¥ 19.9</div>
                </div>
                <div class="num-check">
                    <div class="num-check-tag">数量选择</div>
                    <div class="check-num">
                        <div style="font-size: 20px;color: #666666"><i class="layui-icon layui-icon-subtraction" style="font-size: 15px; color: #333333;"></i></div>
                        <div style="font-size: 16px">1</div>
                        <div style="font-size: 20px;color: #666666"><i class="layui-icon layui-icon-addition" style="font-size: 15px; color: #333333;"></i></div>
                    </div>
                </div>
                <div class="collect-buy">
                    <div class="buynow">立即购买</div>
                    <div class="collect">
                        <i class="layui-icon layui-icon-star" style="font-size: 14px; color: #333333;"></i>  收藏
                    </div>
                </div>

                <div class="add-cart">
                    <i class="layui-icon layui-icon-cart" style="font-size: 14px; color: #333333;"></i>  加入购物车
                </div>
            </div>

        </div>

    </div>

</body>
<script src="js/goods.js"></script>
</html>